window.addEventListener('load', function () {
    //筋斗云部分
    (function () {
        // let could = document.querySelector('.xtx_header .xtx_navs li:nth-child(1) ');
        // let could_after = window.getComputedStyle(could, ':after')
        // console.log(could_after);
        // could_after.style.display = 'none';伪元素哦
        let ul = document.querySelector('#xtx_navs');
        let lis = document.querySelectorAll('.xtx_navs ul li');
        let could = document.querySelector('.xtx_header .xtx_navs .xtx_colud');

        for (i = 0; i < lis.length; i++) {
            lis[i].addEventListener('mouseenter', function () {
                // console.log(this.offsetLeft);
                could.style.transform = `translateX(${this.offsetLeft}px)`
            })

        }

        ul.addEventListener('mouseleave', function () {
            console.log(this.offsetLeft);
            could.style.transform = `translate(${0}px)`
        })

    })();
    //轮播图部分
    (function () {
        let wrapper = document.querySelector('.xtx_banner');
        let banner = document.querySelector('.xtx_banner ul li a img');

        let next = document.querySelector('.next');
        let prev = document.querySelector('.prev')
        let ul = document.querySelector('.indicator');
        let index = 0;

        const data = [
            { src: './uploads/banner_1.png', tiele: 1, },
            { src: './uploads/banner_2.png', tiele: 1, },
            { src: './uploads/banner_3.png', tiele: 1, },
            { src: './uploads/banner_4.jpg', tiele: 1, },
            { src: './uploads/banner_5.jpg', tiele: 1, },
        ]
        next.addEventListener('click', function () {
            index++;
            if (index >= data.length) {
                index = 0;
            }//一定要写前头后面的代码就不执行了
            banner.src = data[index].src;

            document.querySelector('.indicator .active').className = '1';
            document.querySelector(`.indicator span:nth-child(${index + 1})`).className = 'active';

        })
        prev.addEventListener('click', function () {
            index--;
            if (index < 0) {
                index = data.length - 1;
            }
            banner.src = data[index].src;

            document.querySelector('.indicator .active').className = '1';
            document.querySelector(`.indicator span:nth-child(${index + 1})`).className = 'active';
        })
        let timer = setInterval(function () {
            next.click();
        }, 2000);
        wrapper.addEventListener('mouseenter', function () {
            clearInterval(timer);
        })
        wrapper.addEventListener('mouseleave', function () {
            timer = setInterval(function () {
                next.click();
            }, 2000)
        })

    })();
    //窗口滚动
    (function () {
        let window_top = document.querySelector('.xtx_panel');
        let backTop = document.querySelector('#backTop');
        let xtx_list = document.querySelector('.xtx-elevator');
        let xtx_goods_new = document.querySelector('.xtx_goods_new');
        let xtx_goods_popular = document.querySelector('.xtx_goods_popular');
        let xtx_goods_brand = document.querySelector('.xtx_goods_brand ');
        let xtx_goods_topic = document.querySelector('.xtx_goods_topic');
        //淡入淡出
        window.addEventListener('scroll', function () {
            if (window.pageYOffset > 500) {
                xtx_list.style.opacity = '1';
            }
            else {
                xtx_list.style.opacity = '0';
            }
        })
        backTop.addEventListener('click', function () {
            window.scroll(0, 0);
        })

        //电梯点击
        xtx_list.addEventListener('click', function (e) {
            if (e.target.tagName == 'A' && e.target.dataset.name) {
                let str = e.target.dataset.name;
                let top = document.querySelector(`.xtx_goods_${str}`).offsetTop;
                window.scroll(0, top + 10);
                console.log(top);
            }
        })
        window.addEventListener('scroll', function () {
            if (window.pageYOffset > xtx_goods_new.offsetTop && window.pageYOffset < xtx_goods_popular.offsetTop) {
                document.querySelector('.xtx-elevator-list li a.active').className = '';
                document.querySelector('.xtx-elevator-list li:nth-child(1) a').classList.add('active');
            }
            else if (window.pageYOffset > xtx_goods_popular.offsetTop && window.pageYOffset < xtx_goods_brand.offsetTop) {
                document.querySelector('.xtx-elevator-list li a.active').className = '';
                document.querySelector('.xtx-elevator-list li:nth-child(2) a').classList.add('active');
            }
            else if (window.pageYOffset > xtx_goods_brand.offsetTop && window.pageYOffset < xtx_goods_topic.offsetTop) {
                document.querySelector('.xtx-elevator-list li a.active').className = '';
                document.querySelector('.xtx-elevator-list li:nth-child(3) a').classList.add('active');
            }
            else if (window.pageYOffset > xtx_goods_topic.offsetTop) {
                document.querySelector('.xtx-elevator-list li a.active').className = '';
                document.querySelector('.xtx-elevator-list li:nth-child(4) a').classList.add('active');
            }
        })

    })();

})